<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

    <link rel="stylesheet" type="text/css" href="css/baidu.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>


    <script src="js/jquery.min.js"></script>


    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=348E7B9334bf7a888d37a6a2513650ef"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>


</head>
<body style="overflow-y: hidden">
</div>
<!--<div class="top_div">-->
    <!--<table style="table-layout:fixed; width:100%">-->
        <!--<tr>-->
            <!--<td width="50%">-->
                <!--<iframe-->
                        <!--id = "tq"-->
                        <!--allowtransparency="true"-->
                        <!--frameborder="0"-->
                        <!--width="100%" height="86"-->
                        <!--scrolling="no"-->
                        <!--src="http://tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=3&bd=0&k=&f=&q=1&e=0&a=0&c=57447&w=565&h=98&align=center">-->
                <!--</iframe>-->
            <!--</td>-->
            <!--<td>-->
                <!--<table style="table-layout:fixed;" align="center" width="100%">-->
                    <!--<tr>-->
                        <!--<td></td>-->
                        <!--<td width="80px">-->
                            <!--<img style="border-radius: 10px" height="80px" src="../../images/quick_link_05.jpg"/>-->
                        <!--</td>-->
                        <!--<td>-->
                            <!--<span style="font-size: 20px; cursor: pointer" id="wxyt">卫星云图</span>-->
                        <!--</td>-->
                        <!--<td width="80px">-->
                            <!--<img style="border-radius: 10px" height="80px" src="../../images/quick_link_06.jpg"/>-->
                        <!--</td>-->
                        <!--<td>-->
                            <!--<span style="font-size: 20px; cursor: pointer" id="tfzx">台风路径</span>-->
                        <!--</td>-->
                    <!--</tr>-->
                <!--</table>-->
            <!--</td>-->
        <!--</tr>-->
    <!--</table>-->
<!--</div>-->


<div class="down_div">
<!--十堰
    http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=1&t=0&v=0&d=3&bd=0&k=000000&f=&q=1&e=0&a=0&c=57252&w=731&h=28&align=center
-->
<!--荆州
http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=1&t=1&v=0&d=2&bd=0&k=000000&f=&q=1&e=0&a=0&c=57476&w=524&h=28&align=center
-->
    <iframe id="tianqiyubao" allowtransparency="true" frameborder="0" width="524" height="18" scrolling="no" src="http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=1&t=0&v=0&d=3&bd=0&k=000000&f=&q=1&e=0&a=0&c=57252&w=731&h=18&align=center"></iframe>

    <!--<div class="extend_div"></div>-->



    <!--<div class="extend townItem" id="extend" style="font-weight: normal;">＞</div>-->

    <div id="tuli">
        <div id="tuli_bg"></div>
        <script>
            var html = [
                'gongshui.html',
                'yuanshui.html',
                'zhibo.html',
                'zhibo.html',
                'zhibo.html',
                'zhibo.html',
                'zhibo.html'
            ];

            function testp(index) {
                window.location.href=html[index];
            }
        </script>
        <div class="tuli_in" style="float: left; z-index: 10;" >
            <div class="tuli_item" onclick=testp(0)>
                <img src="res/pic01.png" src="">
                <div>涵闸</div>
            </div>
            <div class="tuli_item" onclick=testp(1)>
                <img src="res/pic02.png" alt="">
                <div>水库</div>
            </div>
            <div class="tuli_item" onclick=testp(2)>
                <img src="res/pic03.png" alt="">
                <div>泵站</div>
            </div>
            <div class="tuli_item" onclick=testp(3)>
                <img src="res/pic04.png" alt="">
                <div>雨量</div>
            </div>
            <div class="tuli_item" onclick=testp(4)>
                <img src="res/pic05.png" alt="">
                <div>水位</div>
            </div>
            <div class="tuli_item" onclick=testp(5)>
                <img src="res/pic06.png" alt="">
                <div>卫星</div>
            </div>
            <div class="tuli_item" onclick=testp(6)>
                <img src="res/pic07.png" alt="">
                <div>雷达</div>
            </div>
        </div>
    </div>
</div>

<div class="left_tip">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">简报</a>
        </li>
        <li><a href="#">涵闸</a></li>
        <li id="left_toggle" style="float: right;"><img style="height: 10px; width: 10px; margin: 10px;" src="res/up.png"></li>
    </ul>
    <div id="jb_box" style="text-align: left;">
        <div class="left_it_bg">
            <span>预警信息</span>
        </div>
        <div class="left_p">
            <p>在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中...</p>
        </div>
        <div class="left_it_bg">
            <span>预警信息</span>
        </div>
        <div class="left_p">
            <p>在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中...</p>
        </div>
        <div class="left_it_bg">
            <span>预警信息</span>
        </div>
        <div class="left_p">
            <p>在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中...</p>
        </div>
        <div style="height: 260px; width: auto; overflow-y:scroll">
            <table class="table table-striped" style="width: auto; height: 260px; margin-bottom: 0;">
                <thead>
                <tr>
                    <th style="font-size: 16px;">涵闸</th>
                </tr>
                <tr>
                    <th>闸名</th>
                    <th>上游水位</th>
                    <th>下游水位</th>
                    <th>流量</th>
                    <th>开高</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>560001</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td></td>
                    <td>xxx</td>
                    <td>xx</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="hz_box">

    </div>
</div>
<div class="middle_tip">
    <div class="middle_title">
        <div class="title_name">
            <span>干渠列表</span>
        </div>
        <div class="title_tip dropdown">
            <div class="dropdown-toggle" id="dropdownMenu1"
                 data-toggle="dropdown" style="background: #5794F6">
                <span style="font-size: 16px; line-height: 30px;">选择</span>
            </div>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">Java</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                </li>
                <li role="presentation" class="divider"></li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                </li>
            </ul>
        </div>
        <div class="title_toggle">
            <img src="res/up.png">
        </div>
    </div>
    <div class="middle_data">
        <div style="background: #d2eff8">
            <p>在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中...</p>
        </div>
        <div style="background: #d8f3d9">
            <p>在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中...</p>
        </div>
    </div>
</div>

<div class="right_tip">
    <table class="table table-bordered" style="margin-bottom: 0;">

        <tbody>
        <tr>
            <th colspan="3" style="font-size: 16px; text-align: center; background: #5794F6;">实时数据</th>
        </tr>
        <tr>
            <td rowspan="2">8时水位</td>
            <td>上游水位</td>
            <td>XXX.m</td>
        </tr>
        <tr>
            <td>下游水位</td>
            <td>XXX.m</td>
        </tr>
        <tr>
            <td rowspan="2">闸门闭启</td>
            <td>孔</td>
            <td>000</td>
        </tr>
        <tr>
            <td>开高</td>
            <td>000</td>
        </tr>
        <tr>
            <td>流量</td>
            <td colspan="2">000</td>
        </tr>
        <tr>
            <td>日引流量</td>
            <td colspan="2">000</td>
        </tr>
        </tbody>
    </table>
    <table class="table table-bordered" style="margin-bottom: 0;">
        <tbody>
        <tr>
            <th colspan="4" style="font-size: 16px; text-align: center; background: #5794F6;">基础数据</th>
        </tr>
        <tr>
            <td>设防水位</td>
            <td>XXX.m</td>
            <td>起排水位</td>
            <td>XXX.m</td>
        </tr>
        <tr>
            <td>闸低高度</td>
            <td>XXX.m</td>
            <td>历史最高水位</td>
            <td>XXX.m</td>
        </tr>
        <tr>
            <td>官护人</td>
            <td>王XX</td>
            <td>电话</td>
            <td>12345678901</td>
        </tr>
        </tbody>
    </table>
    <div>
        <img src="res/demo.jpg">
    </div>
    <div style="margin: 0 10px;">
        <button type="button" class="btn btn-danger" id="close_right_tip">关闭</button>
    </div>
</div>



<div id="dituContent" style="border:#ccc solid 1px; position: absolute; top: 0; z-index: -2"></div>

<script>
    var setActive = function (){
        var $a = $(".nav-tabs > li");
        for(var i=0; i<$a.length; i++) {
            $a.eq(i).removeClass('active');
        }
    }
    $(document).ready(function(){
        $(".nav-tabs > li").click(function(){
            setActive();
            $(this).addClass('active');
        });
        $(".nav-tabs > li").eq(0).click(function () {
            $("#jb_box").css('display','block');
        })
        $(".nav-tabs > li").eq(1).click(function () {
            $("#jb_box").css('display','none');
        })
        $(".title_toggle").click(function(){
            $(".middle_data").slideToggle("slow");
        });
        $("#left_toggle").click(function(){
            $("#jb_box").slideToggle("slow");
        });
        $("#close_right_tip").click(function () {
            $(".right_tip").css('display','none');
        })
    });

</script>
<script>
    var ifm = document.getElementById('dituContent');
    var oth = document.documentElement;

    ifm.style.height = oth.clientHeight + 'px';

    ifm.style.width  = oth.clientWidth + 'px';

    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(114.435196,30.454432);//定义一个中心点坐标
        map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        //var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        //map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        //var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        //map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{title:"我的标记",content:"我的备注",point:"114.427651|30.462525",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
    ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

    initMap();//创建和初始化地图
</script>
</body>
</html>



